<template>
  <div id='mapChart' class='chartPart'></div>
</template>

<script>
import guizhou from '@/assets/guizhou.js'
export default {
  props: {
    pingEntityList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  watch: {
    pingEntityList: {
      handler (newVal, oldVal) {
        if (newVal === '') return {}
        if (newVal !== oldVal) {
          this.init()
        }
      },
      // 深度监控
      deep: true
    }
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.mapChart()
      })
    },
    mapChart () {
      let locationMap = {
        '遵义': [106.908, 28.1744],
        '凯里': [108.4241, 26.4166],
        '毕节': [105.1611, 27.0648],
        '都匀': [107.2485, 25.8398],
        '铜仁': [108.6218, 28.0096],
        '兴义': [105.5347, 25.3949],
        '六盘水': [104.7546, 26.0925],
        '安顺': [105.9082, 25.9882],
        '贵阳': [106.6992, 26.7682],
        '贵安': [106.3037, 26.3080]
      }
      // 初始化城市地图
      this.$echarts.registerMap('guizhou', guizhou)
      let location = []
      let centerLocation = []
      // 获取各省市的坐标
      for (let i = 0; i < guizhou.features.length; i++) {
        let str = {}
        str.name = guizhou.features[i].properties.name
        if (guizhou.features[i].properties.name === '贵安') {
          guizhou.features[i].properties.cp[1] = '26.3080'
        }
        str.value = guizhou.features[i].properties.cp
        location.push(str)
        if (guizhou.features[i].properties.name === '贵阳市') {
          centerLocation.push(str)
        }
        // location[guizhou.features[i].properties.name] = guizhou.features[i].properties.cp
      }
      // console.log(this.pingEntityList, '处理完成的数据')
      var data1 = this.pingEntityList
      // 获取迁徙位置坐标
      let convertData = function (data) {
        let res = []
        for (var i = 0; i < data.length; i++) {
          let dataItem = data[i]
          let toCoord = locationMap[dataItem[0].name]
          let fromCoord = locationMap[dataItem[1].name]
          if (fromCoord && toCoord) {
            res.push([{
              coord: toCoord,
              value: dataItem[1].value,
              status: dataItem[1].status
            }, {
              coord: fromCoord
            }])
          }
        }
        return res
      }
      let series = []
      let data = [['贵阳', data1]]
      data.forEach(function (item) {
        series.push({
          name: '贵阳',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //  箭头指向速度，值越小速度越快
            trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', // 箭头图标
            symbolSize: 5 // 图标大小
          },
          lineStyle: {
            normal: {
              width: 1, // 尾迹线条宽度
              color: function (params) {
                const num = params.data.status
                if (!num) {
                  return '#efab82'
                } else {
                  return '#69e7fc'
                }
              },
              // color: '#69e7fc',
              opacity: 1, // 尾迹线条透明度
              curveness: 0.3 // 尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        }, {
          type: 'map',
          zoom: 1.1,
          // center: [115.97, 29.71],
          roam: false, // 是否开启鼠标缩放和平移漫游
          map: 'guizhou', // 自定义扩展图表类型
          itemStyle: {
            normal: {
              // areaColor: this.themeColor.mapColor,
              areaColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#85a4f1' // 0% 处的颜色
                }, {
                  offset: 1, color: '#85a4f1' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor: '#fff'
            },
            emphasis: {
              areaColor: 'rgba(26, 43, 82, 0.5)',
              label: {
                show: true,
                textStyle: {
                  color: 'rgba(26, 43, 82, 0.5)'
                }
              }
            }
          },
          data: convertData(item[1])
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          symbolSize: '5',
          // symbolOffset: [0, 15],
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          label: {
            normal: {
              show: true,
              position: 'right', // 显示位置
              offset: [-20, 15], // 偏移设置
              formatter: function (params) { // 圆环显示文字
                return params.data.name
              },
              fontSize: 10,
              fontWeight: '800',
              color: '#fff'
            },
            emphasis: {
              show: true
            }
          },
          hoverAnimation: true,
          // 设置颜色饼
          itemStyle: {
            normal: {
              color: function (params) {
                const num = params.data.status[2]
                if (!num) {
                  return '#efab82'
                } else {
                  return '#69e7fc'
                }
              },
              // color: '#69e7fc',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: item[1].map(items => {
            return {
              name: items[1].name,
              value: locationMap[items[1].name].concat([items[1].value]),
              status: locationMap[items[1].name].concat([items[1].status])
            }
          })
        },
          // 被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          symbol: 'pin',
          symbolSize: 30,
          itemStyle: {
            normal: {
              color: '#efab83'
            }
          },
          data: centerLocation
        })
      })
      var option = {
        geo: {
          map: 'guizhou',
          aspectScale: 0.75, // 长宽比
          zoom: 1.0,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#7aade8',
              shadowColor: '#335e68',
              opacity: 0.6,
              shadowOffsetX: 0,
              shadowOffsetY: 25
            }
          }
        },
        series: series
      }
      var myChart = this.$echarts.init(document.getElementById('mapChart'))
      myChart.setOption(option)
      // 触发一次图表加载避免显示隐藏后图形宽高变小
      myChart.resize()
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#mapChart {
  width: 100%;
  height: 100%;
}
</style>
